<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

  </style>
</head>
<body>
  <button>点我</button>
</body>
</html>

<script>
// 单词：
  // click  点击

// BOM 事件

// ** 事件的组成部分：**
  // 1. type：事件类型 - eg： on[type] ； 已知的事件类型： resize 、 srcoll 、 load
  // 2. 回调函数 - 
    // 1 + 2 的事件运行机制：一旦该 type 被”触发“，即调用 回调函数

window.onresize = function() {
  console.log('resizing...');
}

window.onscroll = function() {
  console.log('滚动条 被滚动...');
}

window.onload = function() {
  // 触发条件，当所有代码 都加载完， 才触发 load  事件
}

// -------------------------
// DOM 事件：
  // 案例：点击 button，触发 回调 函数
var btn = document.querySelector('button');
btn.onclick = function() {
  console.log('点击了');
}
</script>